<template>
  <div class="commonTableSty grayscale">
    <a-table
      :components="tableComponents"
      :columns="columns"
      :rowKey="(record, index) => index"
      :dataSource="grayscaleList"
      :pagination="false"
      :scroll="{y:true}"
    >
      <!-- 阶段 -->
      <template slot="stage" slot-scope="text, record">
        <span>{{ record.level }}</span>
      </template>
      <!-- 推送车辆占比 -->
      <template slot="tsclzb" slot-scope="text, record">
        <div style="position: relative">
          <a-input
            class="zbinput"
            :class="{ hasError: record.pushNumPercentError }"
            v-model="record.pushNumPercent"
            @change="checkRecordData(record, 'pushNumPercent')"
            suffix="%"
          />
          <span v-show="record.pushNumPercentError" class="has-error">
            <span class="ant-form-explain">{{ record.pushNumPercentMsg }} </span>
          </span>
        </div>
      </template>
      <!-- 进阶条件 -->
      <template slot="jztj" slot-scope="text, record">
        <span class="jzText">{{ $t('xzcgd') }}</span>
        <div style="position: relative; display: inline-block">
          <a-input
            class="zbinput"
            :class="{ hasError: record.downloadNumPercentError }"
            v-model="record.downloadNumPercent"
            @change="checkRecordData(record, 'downloadNumPercent')"
            suffix="%"
          />
          <span v-show="record.downloadNumPercentError" class="has-error">
            <span class="ant-form-explain">{{ record.downloadNumPercentMsg }} </span>
          </span>
        </div>

        <a-select class="jzType zbinput" v-model="record.conditionType">
          <a-select-option
            v-for="(item) in conditionType"
            :key="item.value"
            :value="item.value">
            {{ $t(item.name) }}
          </a-select-option>
        </a-select>
        <span class="jzText">{{ $t('azcgd') }}</span>
        <div style="position: relative; display: inline-block">
          <a-input
            class="zbinput"
            :class="{ hasError: record.installNumPercentError }"
            v-model="record.installNumPercent"
            @change="checkRecordData(record, 'installNumPercent')"
            suffix="%"
          />
          <span v-show="record.installNumPercentError" class="has-error">
            <span class="ant-form-explain">{{ record.installNumPercentMsg }} </span>
          </span>
        </div>
      </template>
      <template slot="action" slot-scope="text, record, index">
        <a :disabled="index < grayscaleList.length - 1 || grayscaleList.length === 2" @click="handleDelete(index)">{{
          $t('delete')
        }}</a>
      </template>
    </a-table>
    <a-button class="newBtn" @click="addlist" :disabled="grayscaleList.length>99"> + </a-button>
  </div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import HasNoPermissionTip from '@/components/HasNoPermissionTip'
import tableDraggable from '@/utils/tableDraggable'
import i18n from '@/lang'
const columns = [
  {
    title: i18n.t('stage'),
    key: 'stage',
    width: 60,
    scopedSlots: { customRender: 'stage' }
  },
  {
    title: i18n.t('tsclzb'),
    key: 'tsclzb',
    width: 120,
    scopedSlots: { customRender: 'tsclzb' }
  },
  {
    title: i18n.t('jztj'),
    key: 'jztj',
    width: 500,
    scopedSlots: { customRender: 'jztj' }
  },
  {
    title: i18n.t('operation'),
    dataIndex: 'action',
    width: 100,
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  name: 'GrayscaleList',
  components: {
    TableEllipsis,
    HasNoPermissionTip
  },
  props: {
    // 表格数据
    grayscaleList: {
      type: Array,
      required: true,
      default () {
        return []
      }
    }
  },
  computed: {
    ...mapGetters(['logindomainCode']),
    ...mapState({
      roleList: (state) => state.role.roleData
    }),
    conditionType () {
      return this.$store.state.task.conditionType
    }

  },
  data () {
    return {
      columns,
      tableComponents: {},
      rules: {
        pushNumPercent: {
          required: true,
          msg: '1-100',
          reg: /^([1-9][0-9]{0,1}|100)$/
        },
        downloadNumPercent: {
          required: true,
          msg: '1-100',
          reg: /^([1-9][0-9]{0,1}|100)$/
        },
        installNumPercent: {
          required: true,
          msg: '1-100',
          reg: /^([1-9][0-9]{0,1}|100)$/
        }
      }
    }
  },
  created () {
    this.tableComponents = tableDraggable(this.columns)
  },
  methods: {
    // 新增某条table
    addlist () {
      const vm = this
      const objItem = {
        level: vm.grayscaleList.length + 1,
        conditionType: 1
      }
      vm.grayscaleList.push(JSON.parse(JSON.stringify(objItem)))
    },
    // 删除单行
    handleDelete (index) {
      const vm = this
      this.submitDisabled = false
      this.$confirm({
        title: vm.$t('delete'),
        content: vm.$t('deleteConfirmNotice').replace('__CONTENT__', this.$t('greyRelease')),
        onOk () {
          vm.grayscaleList.splice(index, 1)
        },
        onCancel () {}
      })
    },
    checkIsEmpty (value) {
      const val = value ? value.replace(/^\s+|\s+$/g, '') : ''
      return val.length === 0
    },
    checkRecordData (data, key) {
      if (this.rules[key] && this.rules[key].required) {
        if (this.checkIsEmpty(data[key])) {
          // eslint-disable-next-line no-param-reassign
          data[key + 'Error'] = true
          // eslint-disable-next-line no-param-reassign
          data[key + 'Msg'] = this.rules[key].msg
          return
        }
        // eslint-disable-next-line no-param-reassign
        data[key + 'Error'] = false
      }
      if (this.rules[key] && this.rules[key].reg) {
        if (data[key] && !this.rules[key].reg.test(data[key])) {
          // eslint-disable-next-line no-param-reassign
          data[key + 'Error'] = true
          // eslint-disable-next-line no-param-reassign
          data[key + 'Msg'] = this.rules[key].msg
        } else {
          // eslint-disable-next-line no-param-reassign
          data[key + 'Error'] = false
        }
      }
    },
    checkList (grayscaleItem) {
      let allCheckOk = true
      const inputKeys = Object.keys(this.rules)
      grayscaleItem.forEach((item) => {
        inputKeys.forEach((keyTag) => {
          const errorKey = keyTag + 'Error'
          // 如果没有进行验证或者有一个验证失败 那么都不能提交
          if (!Object.keys(item).includes(errorKey) || item[errorKey]) {
            allCheckOk = false
          }
        })
      })
      return allCheckOk
    }
  }
}
</script>
<style lang="less">
.commonTableSty {
  &.grayscale {
    .ant-table-wrapper .ant-table-tbody tr > td {
      padding:  16px;
    }
  }
}
</style>

<style lang="less" scoped>
.jzText {
  margin-right: 10px;
}
.jzType {
  margin: 0 16px;
}
.zbinput {
  width: 92px;
}
.has-error {
  position: absolute;
  bottom: -19px;
  left: 0;
}
.newBtn {
  min-width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fafafa;
  margin-top: 16px;
  padding: 0;
  font-size: 24px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
